<template>
	<view class="index-content">
		<view class="user-box">
			<view class="user-info">
				<view class="user-head">
					<image src="../../static/index/header.png" mode=""></image>
				</view>
				<view class="user-text">
					<view class="user-name">
						您未登录账号
					</view>
					<!-- <view class="user-name">
						<view>13638268866</view>
						<view class="user-tips">
							<image src="../../static/index/icon.png" mode=""></image>
						</view>
					</view> -->
					<view class="login-status" @click="gotoLigin">立即登录</view>
					<!-- <view>
						<view>ID(668866)</view>
					</view> -->
				</view>
				<view class="login-fun">
					<view class="login-item">
						<image src="../../static/index/icon2.png" mode=""></image>
						<view>刷新</view>
					</view>
					<view class="login-item" @click="logOff">
						<image src="../../static/index/icon3.png" mode=""></image>
						<view>注销</view>
					</view>
				</view>
			</view>
			<view class="user-address">
				<image src="../../static/index/dw.png" mode=""></image>
				<view>贵阳市</view>
			</view>
		</view>
		<view class="settled" @click="gotoNext('/pagesA/settled/index')">
			<image src="../../static/index/讲师入驻.png" mode=""></image>
		</view>
		<view class="fun-box">
			<view class="subject-box">
				<view v-for="(item,index) in subjectList" :key="index">
					<u-tag :text="item.text" mode="dark" :type="item.checked ? 'success' : 'info'" shape="circle"
						@click="subjectClick(item)" />
				</view>
			</view>
			<!-- 科目一 -->
			<view class="subject-item" v-if="currentTag == 1">
				<view class="fun-box">
					<view class="fun-item" v-for="(item,index) in leftList" :key="index" @click="gotoNext(item.url)">
						<image :src="item.img" mode=""></image>
						<view>{{item.title}}</view>
					</view>
				</view>
				<view class="subject1">
					<view class="subject-calc calc1" @click="gotoNext('/pagesA/topicPractice/index')">
						<view>顺序练习</view>
						<view>0/2166</view>
					</view>
					<view class="subject-calc calc2" @click="gotoNext('/pagesA/mockExam/index')">
						<view>模拟考试</view>
						<view>仿真冲刺</view>
					</view>
				</view>
				<view class="fun-box">
					<view class="fun-item" v-for="(item,index) in rightList" :key="index" @click="gotoNext(item.url)">
						<image :src="item.img" mode=""></image>
						<view>{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 科目二 -->
		<view class="object-second" v-if="currentTag == 2">
			<view class="second-item" v-for="(item,index) in secondList" :key="index" @click="gotoSecond(item.id)">
				<view class="second-image">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="second-name">{{item.name}}</view>
				<view class="time-price">
					<view class="second-time">{{item.time}}课时</view>
					<view class="second-price">￥{{item.price}}</view>
				</view>
			</view>
		
		</view>
		<view class="settled">
			<image src="../../static/index/直播中心.png" mode=""></image>
		</view>
		<view class="customer-service ">
			<image src="../../static/index/客服悬浮球.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				secondList:[
					{
						id:1,
						image:'../../static/index/keer.png',
						name:'科目二考试技巧',
						time:'4',
						price:'128.00'
					},
					{
						id:2,
						image:'../../static/index/keer.png',
						name:'科目二考试技巧',
						time:'4',
						price:'128.00'
					},
					{
						id:3,
						image:'../../static/index/keer.png',
						name:'科目二考试技巧',
						time:'4',
						price:'128.00'
					},
					{
						id:4,
						image:'../../static/index/keer.png',
						name:'科目二考试技巧',
						time:'4',
						price:'128.00'
					}
				],
				currentTag: 1,
				leftList: [{
						img: '../../static/index/fun.png',
						title: '优品好课',
						url: '/pagesA/goodCourse/index'
					},
					{
						img: '../../static/index/fun1.png',
						title: '专题练习',
						url: '/pagesA/specialExercise/index'
					},
					{
						img: '../../static/index/fun2.png',
						title: '章节练习',
						url:'/pagesA/chapterPractice/index'
					},
					{
						img: '../../static/index/fun3.png',
						title: '三力测试',
						url:'/pagesA/topicPractice/index'
					}
				],
				rightList: [{
						img: '../../static/index/fun4.png',
						title: '已购课程',
						url:'/pagesA/boughtCourse/index'
					},
					{
						img: '../../static/index/fun5.png',
						title: '错题收藏',
						url:'/pagesA/questionWrong/index?current=0'
					},
					{
						img: '../../static/index/fun6.png',
						title: '精选500',
						url:'/pagesA/topicPractice/index'
					},
					{
						img: '../../static/index/fun7.png',
						title: '考试成绩',
						url:'/pagesA/testScores/index'
					}
				],
				subjectList: [{
						value: 1,
						text: '科目一',
						checked: true
					},
					{
						value: 2,
						text: '科目二',
						checked: false
					},
					{
						value: 3,
						text: '科目三',
						checked: false
					},
					{
						value: 4,
						text: '科目四',
						checked: false
					}
				]
			}
		},
		methods: {
			gotoNext(url) {
				uni.navigateTo({
					url
				})
			},
			gotoSecond(id){
				uni.navigateTo({
					url:'/pagesA/secondDetail/index'
				})
			},
			logOff() {
				uni.showModal({
					content: '是否将该账号进行注销',
					cancelColor: '#2AC092',
					cancelText: '暂不注销',
					confirmText: '确认注销',
					confirmColor: '#666666',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			subjectClick(item) {
				this.subjectList.forEach(ele => {
					ele.checked = false
				})
				item.checked = true
				this.currentTag = item.value
			},
			gotoLigin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-size-default {
		font-size: 30rpx !important;
	}

	/deep/ .u-mode-dark-info {
		background-color: #EFEFEF !important;
		color: #666666 !important;
	}

	.user-box {
		padding: 40rpx 30rpx;
		color: #fff;
		background-image: url('../../static/index/组 6.png');
		background-size: 100% 100%;

		.user-info {
			display: flex;
			position: relative;

			.user-head {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			.user-text {
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.user-name {
					font-size: 36rpx;
					display: flex;
					align-items: center;


					.user-tips {
						margin-left: 10rpx;
						width: 80rpx;
						height: 38rpx;

						>image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.login-status {
					padding: 5rpx 20rpx;
					background-color: rgba(255, 255, 255, .5);
					width: max-content;
					border-radius: 25rpx;
				}
			}

			.login-fun {
				position: absolute;
				left: 50%;
				top: 70%;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				text-align: center;

				.login-item {
					margin-right: 30rpx;

					>image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}

		.user-address {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			letter-spacing: 2rpx;

			>image {
				margin-right: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.settled {
		width: 95%;
		margin: 0 auto;
		margin-top: 20rpx;

		>image {
			width: 100%;
			height: 300rpx;
		}
	}

	.fun-box {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 20rpx;

		.subject-box {
			display: flex;
			justify-content: space-around;
		}

		.subject-item {
			display: flex;

			.fun-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;


				.fun-item {
					margin-bottom: 70rpx;
					text-align: center;

					>image {
						width: 100rpx;
						height: 100rpx;
					}
				}

				view:last-child {
					margin-bottom: 0;
				}

			}

			.subject1 {
				flex: 2;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				.subject-calc {
					width: 250rpx;
					height: 250rpx;
					border-radius: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: #fff;

					>view:first-child {
						font-size: 34rpx;
						margin-bottom: 20rpx;
					}
				}

				.calc1 {
					background-color: #52ABF2;
					border: 20rpx solid rgb(203, 230, 251);
				}

				.calc2 {
					background-color: #2AC092;
					border: 20rpx solid rgb(191, 236, 222);
				}
			}
		}
	}

	.customer-service {
		position: fixed;
		bottom: 20%;
		right: 20rpx;

		>image {
			width: 130rpx;
			height: 130rpx;
		}
	}
	.object-second{
		width: 95%;
		margin: 20rpx auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.second-item{
			border-radius: 10rpx;
			background-color: #fff;
			width: 49%;
			margin-bottom: 20rpx;
			
			.second-image{
				width: 100%;
				height: 230rpx;
				
				>image{
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
					width: 100%;
					height: 100%;
				}
			}
			
			.second-name,.time-price{
				padding: 10rpx;
			}
			
			.second-name{
				font-size: 28rpx;
				color: #333333;
			}
			
			.time-price{
				display: flex;
				justify-content: space-between;
				
				.second-time{
					color: #999999;
					font-size: 26rpx;
				}
				
				.second-price{
					color: #FF6D6A;
					font-size: 30rpx;
				}
			}
		}
	}
</style>